<template>
 <div class="box">
  <div class="font-600">
    收款報表
  </div>
  <div style="min-width: 1200px;" v-cloak class="mt-[30px]">
    <el-form ref="ruleFormRef" label-width="80px" :model="fromData">
      <el-form-item label="分校" prop="school_id">
        <el-select v-model="fromData.school_id"  placeholder="請選擇" @focus="getSchool">
          <el-option v-for="item in schoolData" :label="item.name" :key="item.id" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="狀態" prop="status">
        <el-select v-model="fromData.status" placeholder="請選擇">
          <el-option label="未作廢" value="1"></el-option>
          <el-option label="已作廢" value="-1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="學生">
        <el-input v-model="student_name" :disabled="true" style="width: 150px;"></el-input>
        <el-button class="ml-4" color="#081F42" icon="ZoomIn" @click="studentShow"></el-button>
        <el-button class="ml-4" type="danger" @click="onClearStudentInfo" >清空</el-button>
      </el-form-item>
       <el-form-item label="員工" prop="admin_id">
        <el-select v-model="fromData.admin_id"  placeholder="請選擇" @focus="getAdmin">
          <el-option v-for="item in adminData" :label="item.ename" :key="item.id" :value="item.id" :disabled="item.role_id == 1"></el-option>
        </el-select>
      </el-form-item>
       <el-form-item label="收款方式" prop="payment_id">
        <el-select v-model="fromData.payment_id"  placeholder="請選擇" @focus="getPayment">
          <el-option v-for="item in paymentData" :label="item.name" :key="item.id" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="加入日期" >
        <date-controls ref="datecontrols" :searchConfig="setFormConfig" @update="update" />
      </el-form-item>
      <ExcelFooter @rebuild="rebuild" @showPage="showPage" />
    </el-form>
    <!-- <a v-show="false" ref="exportExcel" href=""></a> -->
    <studentDio ref="studentRef" @update="getStudent"></studentDio>
  </div>
 </div>
</template>

<script setup>
import {ref,reactive} from 'vue'
import {SchoolList,teacherList,payment} from '@/http/index.js'
import { setFormConfig } from "./index.js"
import { useRouter} from "vue-router";
import studentDio from '@/views/Invoices/invoice/addEdit/student.vue'


const ruleFormRef = ref('')
const fromData = reactive({
        school_id: '',
        status: '',
        student_id:'',
        time:'',
        admin_id:'',
        payment_id:''
      })
    // 學校列表
const schoolData = ref([])
const getSchool = async()=>{
    const data = await SchoolList()
    if (data.code == 200) {
        schoolData.value = data.data.data
    }
}
// 員工列表
const adminData = ref([])
const getAdmin = async()=>{
    let obj={
        school_id:localStorage.getItem('school_id'),
        page: 1,
        limit: 1000,
    }
    const data = await teacherList(obj)
    if (data.code == 200) {
        adminData.value = data.data.data
    }
}
// 收款方式
const paymentData = ref([])
const getPayment = async()=>{
    const data = await payment()
    if (data.code == 200) {
        paymentData.value = data.data.data
    }
}
const studentRef = ref('')
const studentShow = async()=>{
  await studentRef.value.TableData()
  studentRef.value.studentDia = true
}
// 添加學生
const student_name = ref('')
const getStudent = (row)=>{
  student_name.value = row.name
  fromData.student_id = row.id
}
// 清空學生
const onClearStudentInfo = ()=>{
    student_name.value = ''
    fromData.student_id = ''
}


const router = useRouter();
const showPage = ()=>{
            adminData.value.some(item=>{
          if(fromData.admin_id === item.id){
            fromData.admin_name = item.name || item.username
            return true
          }
        })

          let {href} = router.resolve({
          path: '/customer_report_print',
          query: {
           index:'gatheringReport',
           url:'proceeds/derive',
           data:JSON.stringify(fromData),
          }
        })
    window.open(href,'_blank')

}
const datecontrols = ref('')
const rebuild = ()=>{
  ruleFormRef.value.resetFields()
  datecontrols.value.value = ''
  fromData.time = ''
 student_name.value = ''
    fromData.student_id = ''
}
const update = (e)=>{
    fromData.time = e
}
</script>

<style scoped lang='less'>
.box {
  padding: 16px 33px;
}
</style>